<template>
  <view class="background">
    <view class="scroll-container">
      <view class="container" v-for="(item,index) in noticeArr" :key="index">
        <view class="top-section">
          <view class="title" >{{ item.title }}</view>
          <view class="category" v-if="item.category === 1" style="color: #4cd964">案例</view>
          <view class="category" v-if="item.category === 2" style="color: #ec5858">文献资料</view>
          <view class="category" v-if="item.category === 3" style="color: #ce982b">课件</view>
          <view class="category" v-if="item.category === 4" style="color: #4cd964">作业</view>
          <view class="img" @click="toggleButtons(index)">···</view>
        </view>
        <view class="content">
          {{ item.description }}
          <view class="button-view" v-if="item.showButtons">
            <button class="button1" @click="update(item.id)">修改</button>
            <button class="button1" @click="deleteRes(item.id)">删除</button>
          </view>
        </view>
      </view>
    </view>

    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="upload">+</button>
    </view>
  </view>
</template>

<script >
import teacher from "../../api/teacher";

export default {
  data() {
    return {
      noticeArr: [],
      detailResource:[],
      resourceId: 0
    }
  },

  methods: {
    toggleButtons(index) {
      this.noticeArr.forEach((item, i) => {
        if (i === index) {
          item.showButtons = !item.showButtons;
        } else {
          item.showButtons = false;
        }
      });
    },
    //查询资源详情
    // async getResourceDetail(id) {
    //   try {
    //     const res = await teacher.getResource(Number(id));
    //     this.detailResource = res.data
    //     console.log('?????????', res.data)
    //   } catch (e) {
    //     return await Promise.reject(e)
    //   }
    // },

    //获取我的资源列表
    async getList() {
      try {
        const res = await teacher.getResourceList();
        this.noticeArr = res.data
        console.log('=-==-=', this.noticeArr)
      } catch (e) {
        return await Promise.reject(e)
      }
    },

    //删除资源
    async deleteRes(id) {
      console.log('879879', id)
      try {
        await teacher.deleteResource(id);
        uni.showModal({
          content: '确认删除该资源？',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          success: (res) => {
            if (res.confirm) {
              this.showToast('删除成功！');
              this.getList()

            } else {
              console.log('用户点击了取消');
            }
          }
        });
        //刷新页面
      } catch (error) {
        console.error(error);
      }
    },
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'success',
        duration: 1000
      });
    },

    //跳转上传资源
    async upload() {
        uni.navigateTo({
          url: '/pages/resource/upload', // 跳转的目标页面路径
          success: function () {
          },
          fail: function (err) {
          }
        });
    },

    //跳转修改资源
    async update(id) {
      console.log('5555',id)
      uni.navigateTo({
        url: `/pages/resource/updateResource?id=${id}`,
        success: function () {

        },
        fail: function (err) {
        }
      });
    },
    async onLoad() {
      await this.getList()

    },
    //检查是否有需要刷新的数据
    onShow() {
      this.getList()
    }
  }
}
</script>
<style >
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */
}

.scroll-container {
  width: 90%;
  overflow-y: auto; /* 启用垂直滚动条 */
  height: 90%;
}

.container {
  border: 1px solid #cccccc;
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  width: 90%;
  height: 120px; /* 调整高度以适应内容 */
  padding: 10px; /* 可选：添加内边距 */
  margin-top: 10px;
}

.top-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  flex: 1;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}

.category {
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  padding-right: 20px;
  margin-right: 10px;
}

.img {
  font-weight: 400;
  font-size: 26px;
}

.content {
  text-align: left;
  font-size: 14px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  flex: 1;
  padding-top: 10px;
  position: relative; /* 使 .button-view 绝对定位在其内部 */
}

.button1 {
  background-color: #e87e7e;
  color: white;
  width: 50px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 5px;
  margin: 2px;
}

.button-view {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute; /* 绝对定位 */
  top: 0;
  right: 0;
}

</style>